﻿@model IEnumerable<BusinessLayer.ChatBoxUser>

@{
    ViewBag.Title = "About";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- header zone -->
@section header{
    <h1>Community</h1>
}
<!-- header zone -->



<!-- content zone -->
<div class="contentBox about">
    <div class="content">
        <h2>About</h2>
        <div class="left">
            <h3>Tussentitel</h3>
            <p>
                <b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit. Integer hendrerit eros nec tincidunt malesuada. Ut non ante id elit placerat egestas in sed est. In ut viverra mi. Morbi dictum vestibulum arcu at feugiat. Nam hendrerit tristique fermentum. Sed placerat nec enim sed auctor. Aenean ac molestie nulla. Aenean luctus sagittis magna, a hendrerit nibh pulvinar vitae. Sed at nisi a augue suscipit condimentum vel ac enim. Suspendisse ut consequat enim. Fusce nec aliquet justo, ut ornare ipsum. Curabitur at malesuada felis.
            </p>
            <h3>Tussentitel</h3>
            <p>
                Proin felis tellus, ultricies id elit non, pellentesque hendrerit eros. Nullam vel tortor eu sapien euismod ultricies. Pellentesque id nisl consequat, lobortis risus a, sollicitudin massa. Aliquam ac nulla eros. Quisque congue eros diam, at suscipit eros imperdiet a. Donec convallis turpis ut felis molestie feugiat. Aliquam vel faucibus erat. Integer id facilisis ligula. Phasellus ut sodales dui, a porttitor leo. Praesent lacinia dictum lacus sed ultricies. Fusce tempus elit nibh, a commodo dui hendrerit eu. Cras rhoncus diam nisl. Cras ac ultrices orci, id faucibus justo. Aenean in nisl sodales, accumsan ligula at, ultricies odio. Ut ac scelerisque felis, quis tincidunt dolor. Nunc luctus massa vitae ligula scelerisque, ultrices venenatis urna varius.
            </p>
        </div>

        <div class="right members-online">
            <ul id="LoggedInUsersContainer" class="logged-in-users">
                @foreach (var u in Model)
                {
                    <li class='selectorUser' data-name="@u.Name" data-longitude="@u.Position.Longitude" data-latitude="@u.Position.Latitude">
                        <img src='../../Content/img/@u.IconUrl' width='40' height='60'>
                        @u.Name.Substring(0, Math.Min(15, @u.Name.Length)) </li>
                }
            </ul>
        </div>


        <div class="reset"></div>


    </div>
</div>
<!-- content zone -->

<!-- footer zone -->
@section footer{
    <div id="map-canvas"></div>
}
@section scripts{
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        
        

        function initialize() {
            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(51.19, 4.41),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            //var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            $('.selectorUser').each(function (index) {
                add_marker(map, $(this).attr("data-name"), $(this).attr("data-latitude"), $(this).attr("data-longitude"), $(this).find('img').attr('src'));
            });
            

        }

        function add_marker(map, user, lat, lon, image) {

            lat = parseFloat(lat.replace(",", "."));
            lon = parseFloat(lon.replace(",", "."));
            var myLatlng = new google.maps.LatLng(lat, lon);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: user,
                icon: image
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
}
